<template>
  <button @click="show('SUCCESS', '链接已复制')">成功</button>
  <button @click="show('ERROR', '失败')">失败</button>
</template>
<script lang="ts" setup>
let zone: HTMLElement = document.createElement("div");
let hide = () => {
  if(!zone) return
  zone.className = "wecalendar-message animate__slideOutUp";
   document.body.removeChild(zone);
};

let show = (type: string, msg: string) => {
  zone.className = "wecalendar-message animate__slideInDown";
  if (type == "SUCCESS") {
    zone.innerHTML = `<div class="gouxuan message-box-icon" > <span class="iconfont icon-gouxuan" > </span></div > ${msg} `;
  } else if (type == "ERROR") {
    zone.innerHTML = `<div class="guanbi message-box-icon"><span class="iconfont icon-guanbi"></span></div>${msg}`;
  }
  document.body.append(zone);
  setTimeout(() => {
    hide();
  }, 4000);

  //let str ='<div class="wecalendar-message animate__slideInDown">< div class="gouxuan message-box-icon"><span class="iconfont icon-gouxuan"></span></div></div>';
};
</script>
<style>
.wecalendar-message {
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 4px 30px rgba(0, 20, 92, 0.16);
  border-radius: 4px;
  position: fixed;
  top: 106px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  color: #1f2233;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.wecalendar-message .message-box-icon {
  margin-right: 12px;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 22px;
}

.wecalendar-message .message-box-icon .icon-guanbi {
  color: #fff;
}

.wecalendar-message .gouxuan {
  background-color: #00b996;
}

.wecalendar-message .guanbi,
.wecalendar-message .zhuyi {
  background-color: #ff434d;
  display: flex;
  align-items: center;
  justify-content: center;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

.animate__slideInDown {
  animation: slideInDown 0.3s linear;
  -webkit-animation: slideInDown 0.3s linear;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
  }
}

.animate__slideOutUp {
  animation: slideOutUp 0.3s linear;
  -webkit-animation: slideOutUp 0.3s linear;
}
</style>
<style>
@font-face {
  font-family: "iconfont";
  src: url("../../assets/fonts/iconfont.eot?t=7552f485317591c479eae6b72c7a329d"); /* IE9 */
  src: url("../../assets/fonts/iconfont.eot?t=7552f485317591c479eae6b72c7a329d#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("../../assets/fonts/iconfont.woff?t=7552f485317591c479eae6b72c7a329d")
      format("woff2"),
    url("../../assets/fonts/iconfont.woff?t=7552f485317591c479eae6b72c7a329d")
      format("woff"),
    /* chrome、firefox */
      url("../../assets/fonts/iconfont.ttf?t=7552f485317591c479eae6b72c7a329d")
      format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("../../assets/fonts/iconfont.svg?t=7552f485317591c479eae6b72c7a329d#iconfont")
      format("svg"); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bianji:before {
  content: "\e002";
}
.icon-cenyuren:before {
  content: "\e003";
}
.icon-cuowu:before {
  content: "\e004";
}
.icon-fuzhi:before {
  content: "\e005";
}
.icon-gengduo-shuxiang:before {
  content: "\e007";
}
.icon-guanbi:before {
  content: "\e008";
}
.icon-hanpucaishan:before {
  content: "\e009";
}
.icon-jianqu:before {
  content: "\e00a";
}
.icon-libiaoshitu:before {
  content: "\e00b";
}
.icon-rishitu:before {
  content: "\e00c";
}
.icon-shanshu:before {
  content: "\e00d";
}
.icon-shezhi:before {
  content: "\e00e";
}
.icon-shuimeng:before {
  content: "\e00f";
}
.icon-tianjia:before {
  content: "\e010";
}
.icon-xiaosuo:before {
  content: "\e011";
}
.icon-tianjia2:before {
  content: "\e012";
}
.icon-tianjiaricheng:before {
  content: "\e013";
}
.icon-tianjiashijian:before {
  content: "\e014";
}
.icon-wenjing-kai:before {
  content: "\e015";
}
.icon-zhuyi:before {
  content: "\e016";
}
.icon-yulan-guan:before {
  content: "\e017";
}
.icon-shanjiantou-shang:before {
  content: "\e018";
}
.icon-shanjiantou-you:before {
  content: "\e019";
}
.icon-shanjiantou-xia:before {
  content: "\e01a";
}
.icon-shanjiantou-zuo:before {
  content: "\e01b";
}
.icon-fenxiang-2:before {
  content: "\e01c";
}
.icon-fenxiang:before {
  content: "\e01d";
}
.icon-qihuan:before {
  content: "\e01e";
}
.icon-shuaxin:before {
  content: "\e01f";
}
.icon-shuangjiantou-shang:before {
  content: "\e020";
}
.icon-shuangjiantou-xia:before {
  content: "\e021";
}
.icon-zhangjiantou-shang:before {
  content: "\e022";
}
.icon-shuangjiantou-zuo:before {
  content: "\e023";
}
.icon-shuangjiantou-you:before {
  content: "\e024";
}
.icon-zhangjiantou-zuo:before {
  content: "\e025";
}
.icon-zhangjiantou-you:before {
  content: "\e026";
}
.icon-gouxuan:before {
  content: "\e027";
}
.icon-duihua:before {
  content: "\e029";
}
.icon-bujian:before {
  content: "\e02a";
}
.icon-maoshu:before {
  content: "\e02b";
}
.icon-rili:before {
  content: "\e02c";
}
.icon-shijian:before {
  content: "\e02d";
}
.icon-rilicaishan:before {
  content: "\e02e";
}
.icon-touxiang:before {
  content: "\e02f";
}
.icon-xiaoxishixing:before {
  content: "\e030";
}
.icon-shipin:before {
  content: "\e031";
}
.icon-xinxi-1:before {
  content: "\e032";
}
.icon-yuyin:before {
  content: "\e033";
}
.icon-zhouji:before {
  content: "\e034";
}
.icon-yuding:before {
  content: "\e035";
}
.icon-weizhi:before {
  content: "\e036";
}
.icon-fuchen:before {
  content: "\e037";
}
.icon-suochenbo:before {
  content: "\e038";
}
.icon-yantongmai:before {
  content: "\e039";
}
.icon-wu:before {
  content: "\e03a";
}
.icon-tetaiboyu:before {
  content: "\e03b";
}
.icon-yin:before {
  content: "\e03c";
}
.icon-yugaxue:before {
  content: "\e03d";
}
.icon-qing:before {
  content: "\e03e";
}
.icon-yangsuo:before {
  content: "\e03f";
}
.icon-yu:before {
  content: "\e040";
}
.icon-xiaoxue:before {
  content: "\e041";
}
.icon-xiaoyu:before {
  content: "\e042";
}
.icon-jiangsuochenbo:before {
  content: "\e043";
}
.icon-tejiangnongwu:before {
  content: "\e044";
}
.icon-xue:before {
  content: "\e045";
}
.icon-boxue:before {
  content: "\e046";
}
.icon-leizhenyu:before {
  content: "\e047";
}
.icon-jiangnongwu:before {
  content: "\e048";
}
.icon-leizhenyupanyoubingbao:before {
  content: "\e049";
}
.icon-mai:before {
  content: "\e04a";
}
.icon-nongwu:before {
  content: "\e04b";
}
.icon-dongyu:before {
  content: "\e04c";
}
.icon-taiyu:before {
  content: "\e04d";
}
.icon-boyu:before {
  content: "\e04e";
}
.icon-taixue:before {
  content: "\e04f";
}
.icon-taiboyu:before {
  content: "\e050";
}
.icon-duoyun:before {
  content: "\e051";
}
.icon-zhenxue:before {
  content: "\e052";
}
.icon-taiwu:before {
  content: "\e053";
}
.icon-zhongzhaimai:before {
  content: "\e054";
}
.icon-tongzhaimai:before {
  content: "\e055";
}
.icon-zhongyu:before {
  content: "\e056";
}
.icon-zhenyu:before {
  content: "\e057";
}
.icon-zhongxue:before {
  content: "\e058";
}
.icon-boyudaotaiboyu:before {
  content: "\e059";
}
.icon-taiboyudaotetaiboyu:before {
  content: "\e05a";
}
.icon-taidaoboyu:before {
  content: "\e05b";
}
.icon-taidaoboxue:before {
  content: "\e05c";
}
.icon-xiaodaozhongxue:before {
  content: "\e05d";
}
.icon-zhongdaotaixue:before {
  content: "\e05e";
}
.icon-xiaodaozhongyu:before {
  content: "\e05f";
}
.icon-zhongdaotaiyu:before {
  content: "\e060";
}
.icon-morenquexingtouxiang:before {
  content: "\e062";
}
.icon-caisetubiaoyuyue:before {
  content: "\e063";
}
.icon-caisetubiaoyueshijian:before {
  content: "\e064";
}
.icon-ren:before {
  content: "\e065";
}
.icon-wenjianga:before {
  content: "\e066";
}
.icon-shouji:before {
  content: "\e067";
}
.icon-youjian:before {
  content: "\e068";
}
.icon-rushitu:before {
  content: "\e069";
}
.icon-Exchange:before {
  content: "\e06b";
}
.icon-fanhui:before {
  content: "\e06c";
}
.icon-anquan:before {
  content: "\e06e";
}
.icon-lixian:before {
  content: "\e072";
}
.icon-kezhankaijiantou:before {
  content: "\e079";
}
.icon-shouqijiantou:before {
  content: "\e07a";
}
.icon-gengduo-huangxiang:before {
  content: "\e09a";
}
.icon-iconteshutongyongchuangjianzhebiaoshi:before {
  content: "\e09b";
}
.icon-iconteshuriligouxuanjiaobiao:before {
  content: "\e09f";
}
.icon-4zhoushitu:before {
  content: "\e0a0";
}
.icon-daiding:before {
  content: "\e0ae";
}
.icon-yueshijian:before {
  content: "\e0af";
}
.icon-shijianlibiao:before {
  content: "\e0b0";
}
.icon-detu-dingweidian:before {
  content: "\e0b2";
}
.icon-detu-dingweigan:before {
  content: "\e0b3";
}
.icon-dezhi:before {
  content: "\e0c6";
}
.icon-gongxiang:before {
  content: "\e0c7";
}
.icon-tieweifuguifanzhuanyong:before {
  content: "\e0c9";
}
.icon-shouye:before {
  content: "\e0ca";
}
.icon-qunzu:before {
  content: "\e0cb";
}
.icon-gengduo:before {
  content: "\e0cc";
}
.icon-shuaxin-1:before {
  content: "\e0cd";
}
.icon-chenggong:before {
  content: "\e0ce";
}
.icon-cuowu-2:before {
  content: "\e0cf";
}
.icon-zhuyi-1:before {
  content: "\e0d0";
}
.icon-dingwei:before {
  content: "\e0d1";
}
.icon-jiejia:before {
  content: "\e0d2";
}
.icon-nongli:before {
  content: "\e0d3";
}
.icon-mubiao:before {
  content: "\e0d4";
}
.icon-rili-1:before {
  content: "\e0d5";
}
.icon-qiyeweixin:before {
  content: "\e0d6";
}
.icon-shijian-1:before {
  content: "\e0d7";
}
.icon-tianqi:before {
  content: "\e0d8";
}
.icon-shouji-1:before {
  content: "\e0d9";
}
.icon-tengxunhuiyi-1:before {
  content: "\e0da";
}
.icon-touxiang-1:before {
  content: "\e0db";
}
.icon-xuxian:before {
  content: "\e0dc";
}
.icon-weixin:before {
  content: "\e0dd";
}
.icon-yonghu:before {
  content: "\e0de";
}
.icon-lianxie:before {
  content: "\e0df";
}
.icon-qiye:before {
  content: "\e0e0";
}
.icon-tengxunhuiyi:before {
  content: "\e0e1";
}
.icon-fuzhi-1:before {
  content: "\e0e3";
}
.icon-shijianxianqihuan:before {
  content: "\e0e4";
}
</style>
